<template>
  <div class="container">
    <el-card>
      <!-- 面包屑 -->
      <div slot="header" class="clearfix">
        <el-breadcrumb>
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>大数据</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 筛选 -->
      <el-row>
        <el-col :span="18">
          <el-form :inline="true" label-width="80px" size="small">
            <el-form-item label="目录名称">
              <el-input v-model="requestParams.directoryName"></el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select v-model="requestParams.state" placeholder="请选择">
                <el-option :value="1" label="启用"></el-option>
                <el-option :value="0" label="禁用"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="clear()">清除</el-button>
              <el-button type="primary" @click="search()">搜索</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" style="text-align: right">
          <el-button size="mini" icon="el-icon-back" @click="$router.back()">返回学科</el-button>
            <el-button type="primary" size="mini" @click="openDialog()">新增目录</el-button>
        </el-col>
      </el-row>
      <!-- 数据记录 -->
      <el-alert
        title="数据一共5条"
        style="margin-bottom: 15px"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 表格 -->
      <el-table :data="directorys" style="width: 100%">
        <el-table-column
          label="序号"
          type="index"
          width="80px"
        ></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"> </el-table-column>
        <el-table-column label="创建日期" prop="addDate"> </el-table-column>
        <el-table-column label="面试题数量" prop="totals"> </el-table-column>
        <el-table-column label="状态">
          <template #default="{ row }">{{ row.state === 1 ? "已启" : "已禁" }}</template>
        </el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <el-button type="text" @click="toggleState(scope.row)">{{scope.row.state === 0 ? "禁止" : "启动"}}</el-button>
            <el-button type="text" :disabled="scope.row.state === 1"  @click="openDialog(scope.row)" >修改</el-button>
            <el-button type="text" :disabled="scope.row.state === 1 || scope.row.totals > 0" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 20px; text-align: right"
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="requestParams.pagesize"
        :current-page="requestParams.page"
        :page-sizes="[1, 2, 3, 4]"
        @current-change="changeCurrent"
        @size-change="changeSize"
      ></el-pagination>
    </el-card>
    <!-- dialog组件（添加、修改复用） -->
    <DirectorysAdd :data="currDirectory" ref="directorysAdd" @updateList="updateList"></DirectorysAdd>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys.js'
import DirectorysAdd from '../components/directorys-add.vue'

export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      // 请求来的table值
      requestParams: {
        directoryName: null,
        state: null,
        page: 1,
        pagesize: 10
      },
      total: 0,
      // 请求来的值赋值给directorys进行table渲染
      directorys: [],
      currDirectory: {}
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 查询列表
    async getList () {
      const { data } = await list(this.requestParams)
      console.log(data)
      this.directorys = data.items
      this.total = data.counts
    },
    // 点击清除按钮，清空关键字输入框
    clear () {
      this.requestParams = {
        directoryName: null,
        state: null
      }
    },
    // 点击筛选按钮，搜索
    search () {
      this.requestParams.page = 1
      this.getList()
    },
    // 切换每页显示多少条
    changeSize (val) {
      this.requestParams.pagesize = val
      this.requestParams.page = 1
      // console.log(val)
      this.getList()
    },
    // 改变页数
    changeCurrent (val) {
      this.requestParams.page = val
      // console.log(val)
      this.getList()
    },
    // 弹框
    openDialog (directory = {}) {
      this.currDirectory = directory
      console.log(this.currDirectory)
      this.$nextTick(() => {
        this.$refs.directorysAdd.open()
      })
    },
    // 增加完更新页面
    updateList () {
      console.log(1)
      this.getList()
    },
    // 切换状态
    async toggleState (directory) {
      await changeState({
        id: directory.id,
        state: directory.state === 1 ? 0 : 1
      })
      this.$message.success('操作成功')
      directory.state = directory.state === 1 ? 0 : 1
    },
    // 删除
    async del (directory) {
      await this.$confirm('此操作将永久删除该目录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await remove(directory)
      this.$message.success('删除成功')
      this.getList()
    }
  }
}
</script>

<style scoped lang='less'></style>
